<template>
	<div class="advertisement">
		<header>广告位管理</header>
		<div class="contents">
			<div class="ad_list">
				<div class="ad_list_title">广告位列表</div>
				<div class="ad_list_tab">
					<el-tabs type="card" @tab-click="handleClick">
						<el-tab-pane label="全部"></el-tab-pane>
						<el-tab-pane label="未发布"></el-tab-pane>
						<el-tab-pane label="已发布"></el-tab-pane>
					</el-tabs>
					<el-input style="width:272px;margin:0 15px 0 20px;" v-model.trim="input1" placeholder="请输入">
						<el-button slot="append" icon="el-icon-search" @click.native="search"></el-button>
					</el-input>
				</div>
			</div>
			<div class="ad_btns">
				<el-button type="danger" style="background:#e7251a;" @click.native="addAd">新增广告位</el-button>
				<el-button style="border:1px solid #e7251a;color:#e7251a;" @click.native="delAd">删除</el-button>
				<el-button @click.native="sendAd">发布</el-button>
			</div>
			<div class="selected" v-if="selectArr.length>0">
				<p>
					<img src="../../assets/images/market/select2.png" alt="" />
					<span>已选择&nbsp;
						<label>{{selectArr.length}}</label>&nbsp;项</span>
				</p>
			</div>
			<div class="tables">
				<el-table v-loading="loading" :data="adList" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50"> </el-table-column>
					<el-table-column prop="MEDIAPATH" label="图片" width="200">
						<template slot-scope="scope">
							<img width="50" height="50" :src="scope.row.MEDIAPATH" alt="" /> </template>
					</el-table-column>
					<el-table-column prop="SUBJECT" label="主题" width="400"> </el-table-column>
					<el-table-column prop="STATUS" label="状态" width="120">
						<template slot-scope="scope">
							<span>{{ scope.row.STATUS == 1 ? '已发布' : '未发布'}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="ISSHOW" label="是否显示" width="120">
						<template slot-scope="scope">
							<span>{{ scope.row.ISSHOW == 1 ? '显示' : '隐藏'}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="ORDERNUM" label="顺序" width="120"> </el-table-column>
					<el-table-column prop="REMARK" label="备注" width="250">
						<template slot-scope="scope">
							<span v-if="scope.row.REMARK">{{scope.row.REMARK}}</span>
							<span v-else>--</span>
						</template>
					</el-table-column>
					<el-table-column prop="options" label="操作" width="200">
						<template slot-scope="scope">
							<span class="editStatus" @click="changeS(scope.row.ADVSID,scope.row.ISSHOW)">{{ scope.row.ISSHOW == 1 ? '隐藏' : '显示'}}</span>
							<span style="color:#d8dce5;">|</span>
							<span class="edits" @click="editAd(scope.row.ADVSID)">编辑</span>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page1" :page-sizes="[6,8,10]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.COUNT"> </el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import { getAdvsList } from '@/api/advertisement'
	import { hideAdvs } from '@/api/advertisement'
	import { deleteAdvs } from '@/api/advertisement'
	export default {
		name: 'advertisement',
		data() {
			return {
				input1: '', //input值
				tableDatas: [], //所有广告位数据	    
				selectArr: [], //已选择的数组集合
				page1: 1, //当前页数
				pageSize1: 6, //每页多少条数据
				loading: true,
				status: null, //1-已发布 0-未发布 ''-全部
			}
		},
		computed: {
			//请求参数
			objs() {
				let obj = {};
				this.input1 ? obj.LIKESTR = this.input1 : null;
				obj.PAGE_NO = this.page1;
				obj.PAGE_SIZE = this.pageSize1;
				if(this.status === 0 || this.status === 1) {
					obj.STATUS = this.status;
				}
				return obj;
			},			
			//分页数据
			adList() {				
				if(this.tableDatas.ADVSARR) {
					return this.tableDatas.ADVSARR;
				}
			}
		},
		created() {
			this.getList();
		},
		methods: {
			//广告列表
			getList(){
				this.loading = true;
				this.$axiosPost('/4SCAFE/RegionAdvs/getAdvsList.action', this.objs).then(res => {
					if(res.STATUS_CODE === 1) {
						this.loading = false;
						this.tableDatas = res;
					}
				})
			},
			//切换选项卡
			handleClick(tab, event) {
				if(tab.index == '1') { //未发布
					this.status = 0;
				} else if(tab.index == '2') { //已发布
					this.status = 1;
				} else { //全部
					this.status = null;
				}
				this.getList();
			},
			handleSelectionChange(val) {
				this.selectArr = val;
			},
			handleSizeChange(val) {
				this.loading = true;
				this.pageSize1 = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.loading = true;
				this.page1 = val;				
				this.getList();
			},
			//搜索
			search() {
				if(this.input1 == '') {
					this.$alert('请输入内容', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				this.getList();
			},
			//新增广告
			addAd() {
				this.$router.push({
					path: '/functions/addAd'
				});
			},
			//删除广告
			delAd() {
				if(this.selectArr.length === 0) {
					this.$alert('请选择广告', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				let strr = '';
				for(let i = 0; i < this.selectArr.length; i++) {
					strr += this.selectArr[i].ADVSID + ',';
				}
				strr = strr.substring(0, strr.length - 1);
				//console.log(strr);
				this.$axiosPost('/4SCAFE/RegionAdvs/deleteAdvs.action', {
					ADVS_IDS: strr
				}).then(res => {
					if(res.STATUS_CODE === 1) {
						if(strr.search(/,/) > 0) { //---------------批量删除   					
							this.$message({
								type: 'success',
								message: '批量删除成功'
							});
							setTimeout(() => this.$router.go(0), 1000);
						} else { //--------------------------------单个删除
							this.$message({
								type: 'success',
								message: '删除成功'
							});
							for(let i = 0; i < this.adList.length; i++) {
								if(this.adList[i].ADVSID == strr) {
									this.adList.splice(i, 1);
								}
							}
						}
					}
				})
			},
			//发布广告
			sendAd() {
				if(this.selectArr.length === 0) {
					this.$alert('请选择广告', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				let strr = '';
				for(let i = 0; i < this.selectArr.length; i++) {
					strr += this.selectArr[i].ADVSID + ',';
				}
				strr = strr.substring(0, strr.length - 1);
				//console.log(strr);
				this.$axiosPost('/4SCAFE/RegionAdvs/issueAdvs.action', {
					ADVS_IDS: strr
				}).then(res => {
					//console.log(res);
					if(res.STATUS_CODE === 1) {
						if(strr.search(/,/) > 0) { //---------------批量发布  					
							for(let i = 0; i < this.adList.length; i++) {
								for(let j = 0; j < strr.split(',').length; j++) {
									if(this.adList[i].ADVSID == strr.split(',')[j]) {
										this.$set(this.adList[i], 'STATUS', 1);
									}
								}
							}
							this.$message({
								type: 'success',
								message: '批量状态改为已发布'
							});
						} else { //--------------------------------单个发布
							for(let i = 0; i < this.adList.length; i++) {
								if(this.adList[i].ADVSID == strr) {
									this.$set(this.adList[i], 'STATUS', 1);
								}
							}
							this.$message({
								type: 'success',
								message: '状态改为已发布'
							});
						}
					}
				})
			},
			//改变状态
			changeS(id, isShow) {
				let obj = {};
				obj.ADVS_ID = id;
				obj.ISSHOW = isShow == 1 ? 0 : 1;
				hideAdvs(obj).then(res => {
					if(res.data.STATUS_CODE === 1) {
						for(let i = 0; i < this.adList.length; i++) {
							if(this.adList[i].ADVSID == id) {
								if(this.adList[i].ISSHOW == 1) {
									this.$message({
										type: 'success',
										message: '状态已改变'
									});
									this.$set(this.adList[i], 'ISSHOW', 0);
								} else {
									this.$message({
										type: 'success',
										message: '状态已改变'
									});
									this.$set(this.adList[i], 'ISSHOW', 1);
								}
							}
						}
					}
				})
			},
			//编辑
			editAd(id) {
				this.$router.push({
					path: '/functions/editAd/' + id
				});
			}
		},
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.advertisement {
		header {
			background: #fff;
			font-size: 22px;
			font-weight: 700;
			padding: 20px;
		}
		.contents {
			width: 97%;
			margin: 25px auto;
			padding: 15px 25px;
			background: #fff;
			.ad_list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.ad_list_title {
					height: 68px;
					padding-top: 10px;
					font-size: 20px;
				}
				.ad_list_tab {
					display: flex;
					padding-top: 10px;
				}
			}
			.selected {
				margin-top: 15px;
				border: 1px solid #f0f0f0;
				border-radius: 5px;
				background: #fafafa;
				p {
					display: flex;
					align-items: center;
					img {
						width: 20px;
						height: 20px;
						margin: 0 10px;
					}
					span {
						font-size: 16px;
						color: #717a7d;
						label {
							color: #e7251a;
						}
					}
				}
			}
			.tables {
				margin-top: 30px;
				.el-pagination {
					text-align: center;
					margin-top: 30px;
				}
				.editStatus, .edits {
					color: #1d93ff;
					cursor: pointer;
					margin: 0 2px;
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}
</style>